import { defineComponent, PropType } from "vue";
import { showSlot } from "~/src/utils/hooks";
import Style from './1080.module.scss';

export default defineComponent({
    props: {
        /** 医生头像*/
        docPicture: {
            type: String as PropType<string>,

        },
        /**医生姓名 */
        name: {
            type: String as PropType<string>,

        },
        /**医生职称 */
        title: {
            type: String as PropType<string>,

        },
        /**医生介绍 */
        introduce: {
            type: String as PropType<string>,

        },
        /**号源状态 满号或者有号 */
        hyzt: {
            type: String as PropType<string>,

        },

    },
    emits: ['click'],
    setup(props, { slots, attrs,emit }) {
        // 处理组件点击事件
        const handleComponentClick = () => {
            emit('click');
        };
        return () => <div class={Style.outer} {...attrs} onClick={handleComponentClick}>
            <div style={{ width: "202px" }} >

                <div class={Style.picStyle}>
                    <img src={props.docPicture}></img>
                </div>


            </div>
            <div style={{ margin: '0px 40px 0px 36px' }}>
                <div>
                    <span class={Style.nameFontStyle}>
                        {props.name}
                    </span >
                    <span class={Style.titleFontStyle}>【{props.title}】 </span>

                </div>
                <div class={Style.introduceFontStyle} style={{ marginTop: "26px" }}>
                    {props.introduce}
                </div>
            </div>
            <div style={{ textAlign: "right", width: "298px" }}>
                <div style={{ marginRight: "30px" }}>
                    <div class={Style.fontStyle}>
                        {props.hyzt == '有号' ? <span style="color: #3973F8;">有号</span> : <span style='color: #FB1434;'>满号</span>}
                    </div>
                    <div class={Style.btnStyle} style={{ marginTop: "26px" }}>
                        {showSlot(slots, "btn")}

                    </div>
                </div>


            </div>
        </div>
    }
})
